import React from "react";
import "./login.less";
import { Form, Input, Button, Row, Col } from "antd";
import md5 from "md5";
import store from "../../store";
import { actionLogin } from "../../store/actionCreate";
const Login = props => {
  const fromPath =
    props.location.state && (props.location.state.fromPath || "/");
  const loginApi = value => {
    const { username, password } = value;
    const data = {
      userName: username,
      password: md5(password)
    };
    const action = actionLogin(data, () => {
      if (fromPath) {
        props.history.push(fromPath);
      } else {
        props.history.push("/");
      }
    });
    store.dispatch(action);
  };
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };
  const onFinish = values => {
    console.log("Success:", values);
    loginApi(values);
  };
  const onFinishFailed = errorInfo => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="container-login">
      <div className="login">
        <h1>货栈美链系统管理后台</h1>
        <div>
          <Form
            name="basic"
            size="large"
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: "Please input your username!" }
              ]}
            >
              <Input allowClear placeholder="usernmae" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "Please input your password!" }
              ]}
            >
              <Input.Password allowClear placeholder="password" />
            </Form.Item>
            <Form.Item>
              <Row>
                <Col span={10}>
                  <Button htmlType="submit" type="primary" size="large" block>
                    登录
                  </Button>
                </Col>
                <Col span={4}></Col>
                <Col span={10}>
                  <Button
                    size="large"
                    block
                    htmlType="button"
                    onClick={onReset}
                  >
                    重置
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};
export default Login;
